<template>
  <div class="home">
    <header class="header">
      <h1>阳江市公安局合成作战平台</h1>
      <p class="header-time">
        <span>2018年12月26日</span>
        <span>19：49：51</span>
        <span>星期三</span>
      </p>
    </header>
    <div class="container">
      <div class="left">
        <div class="resoure-item left-item">
          <h3 class="item-title">全市数据资源统计</h3>
          <div class="item">
            <p class="title">今日更新</p>
            <p class="num">
              <i>1</i>
            </p>
          </div>
          <div class="item">
            <p class="title">资源总量</p>
            <p class="num">
              <i>1</i>
              <i>2</i>
            </p>
          </div>
        </div>
        <div class="person-item left-item">
          <h3 class="item-title">全市人口统计</h3>
          <ul class="list">
            <li class="li">
              <div class="icon icon1"></div>
              <div class="text">
                <p>1,234,567</p>
                <span>常住人口</span>
              </div>
            </li>
            <li class="li">
              <div class="icon icon2"></div>
              <div class="text">
                <p>1,234,567</p>
                <span>重点人员</span>
              </div>
            </li>
            <li class="li">
              <div class="icon icon3"></div>
              <div class="text">
                <p>1,234,567</p>
                <span>预警人员</span>
              </div>
            </li>
            <li class="li">
              <div class="icon icon4"></div>
              <div class="text">
                <p>1,234,567</p>
                <span>在逃人员</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="map-item left-item">
          <h3 class="item-title">各区县资源概况统计</h3>
          <!-- <div class="item-map"></div> -->
          <left-map-bg chartId="leftmapBg"></left-map-bg>
          <left-map chartId="leftmap" :options="leftMapData"></left-map>
        </div>
      </div>
      <div class="center">
        <div class="center-top">
          <div class="top-container">
            <h3>应用菜单栏</h3>
            <div class="search-wrapper">
              <el-input placeholder="请简单输入您的关键词，如人员、物品、案件、组织或综合。" v-model="searchkey" class="input-select">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                  <el-option label="智能云搜" value="1"></el-option>
                  <el-option label="刑侦专题" value="2"></el-option>
                  <el-option label="超级档案" value="3"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
            <ul class="list-item">
              <li class="item-wrapper" v-for="(val,key) in navList" :key="key">
                <div class="item-icon"><i class="icon icon1"></i></div>
                <p class="text">{{ val }}</p>
              </li>
            </ul>
            <div class="btn-wrapper">
              <button class="btn-top" type="button">上翻</button>
              <button class="btn-top disabled" type="button">下翻</button>
            </div>
          </div>
        </div>
        <div class="center-bottom">
          <h3 class="item-title">24小时卡口过车数统计</h3>
          <center-bottom chartId="centerBottom" :options="centerBottomData"></center-bottom>
        </div>
      </div>
      <div class="right">
        <div class="right-top">
          <h3 class="item-title">全市警情分析</h3>
          <el-radio-group v-model="radio" size="small" class="radio-wrapper">
            <el-radio label="day">日</el-radio>
            <el-radio label="week">周</el-radio>
            <el-radio label="month">月</el-radio>
            <el-radio label="season">季</el-radio>
            <el-radio label="year">年</el-radio>
          </el-radio-group>
          <div class="item-total">
            <p class="title">警情数量统计</p>
            <div class="num-wrapper">
              <p class="num1">253</p>
              <span>有效警情</span>
            </div>
            <div class="num-wrapper">
              <p class="num2">253</p>
              <span>无效警情</span>
            </div>
            <div class="num-wrapper">
              <p class="num3">253</p>
              <span>警情总数</span>
            </div>
          </div>
          <div class="item-pie">
            <p class="title">警情种类统计</p>
            <right-pie chartId="rightPie" :options="rightPieData"></right-pie>
          </div>
        </div>
        <div class="right-bottom">
          <h3 class="item-title">各区县重点人员分析</h3>
          <right-radar chartId="rightRadar" :options="rightRadarData"></right-radar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mockdata } from '../mock/data-service.js'
import leftMapBg from '../components/left-map-bg.vue'
import leftMap from '../components/left-map.vue'
import CenterBottom from '../components/center-bottom.vue'
import RightPie from '../components/right-pie.vue'
import RightRadar from '../components/right-radar.vue'
export default {
  components: {
    leftMapBg,
    leftMap,
    CenterBottom,
    RightPie,
    RightRadar
  },
  data () {
    return {
      searchkey: '',
      select: '1',
      navList: ['智能云搜','无犯罪记录核查','治安专题','刑侦专题','警情案分析','可视化分析工具','专题统计分析','家谱分析','添加应用'],
      radio: 'day',
      centerBottomData: mockdata.centerBottom,
      rightPieData: mockdata.rightPieData,
      rightRadarData: mockdata.rightRadarData,
      leftMapData: mockdata.leftMapData
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../assets/style/home.styl'
</style>
<style lang="stylus">
inputplace($color){
  &::-webkit-input-placeholder {
    color: $color;
  }
  &:-ms-input-placeholder { // IE10+
    color: $color;
  }
  &:-moz-placeholder { // Firefox4-18
    color: $color;
  }
  &::-moz-placeholder { // Firefox19+
    color: $color;
  }
}

.input-select
  height 100%
  border 1px solid #66e8ff
  .el-input__inner, .el-button, .el-input-group__append
    background-color transparent !important
    border none !important
  .el-input-group__prepend 
    width (110 / 830) * 100%
    height 100%
    padding 0 10px
    background-color #005a9f
    border none !important
    .el-select, .el-input 
      width 100%
      height 100%
      margin 0
      font-size 14px !important
      color #fff
    .el-input input 
      width 100%
      padding 0  
    .el-input__suffix 
      right -6px 
    .el-input__suffix-inner
      display block
      height 100%
      line-height 34px
      .el-input__icon 
        line-height 34px
        color #fff
  .el-input__inner 
    width (720 / 830) * 100%  
    height 100%
    font-size 12px
    color #ffffff
    inputplace(#c4f1f6)
  .el-icon-search 
    color #00c5d1
.el-select-dropdown 
  li 
    background-color transparent    

.radio-wrapper 
  display block !important
  margin 25px 0 20px
  text-align center
  .el-radio 
    height 20px
    line-height 20px
    background-color #021e67
    transition .4s all
    &:hover, &.is-checked  
      color #fff
      background-color #067dfe
    &+.el-radio 
      margin-left 15px
  .el-radio__input 
    display none
  .el-radio__label 
    padding 0 15px
  .el-radio__input.is-checked+.el-radio__label
    color #fff
</style>
